<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input id="year" type="text">
  <button id="btn">判断</button>
  <input id="result" type="text">
</body>
<script>
  // 需求
  // 在第一个输入框中输入一个年份  点击判断按钮  将结果输出到  输出框
  // 年份的要求:  1000-9999的整数

  // 1. 分析需要操作的元素  => JS操作元素之前 需要 获取元素  

  var yearInp = document.getElementById("year");  // 年份输入框
  var btn = document.getElementById("btn");
  var resultInp = document.getElementById("result");
  console.log(yearInp, btn, resultInp);

  // 2. 给btn按钮绑定点击事件  => 点击的时候对yearInp的值进行验证
  btn.onclick = function () {  // 当按钮被点击时 => 执行function中{}的内容
    // alert(111111);    

    // 3. 点击取值  取yearInp的value值 (从输入框中取的value值都是文本 =>字符串类型)
    // console.log(yearInp.value);
    // if(yearInp.value>=1000 && yearInp.value <= 9999){}
    var year = yearInp.value;  // 取yearInp的value值 赋值给变量year (字符串类型)  
    var result = isRun(year);
    if (result) {
      resultInp.value = year + "是闰年";
    } else {
      resultInp.value = year + "是平年";
    }




  }


  // 此处直接将结果输出到 resultInp  不设置返回值也可以 
  // 缺点: 代码不独立, 输出时必须存在 表单元素resultInp (只能在当前页面复用)
  function isRun(year) {
    // var year = 2000;
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
      return true;
    } else {
      return false;
    }
  }





</script>

</html>